<template>
	<view class="page">
		<view class="search-view">
			<input v-model="keywords" placeholder="搜索" placeholder-style="font-size:26rpx;color:#ccc;" @input="handleSearch" />
			<image src="/static/images/ic_search.png"></image>
		</view>
		<view class="scroll-view">
			<scroll-view scroll-y="true" class="scroll-left">
				<view style="background-color:  #fff;">
					<view style="display: flex;align-items: center;justify-content: space-between;"
						:class="index == current ? 'left-items' : index + 1 == current ? 'top-item' : index - 1 == current ? 'bottom-item' : 'left-item'"
						v-for="(item, index) of categoryList" :key="index" @click="leftClick(item, index)">
						<view v-if="current == index" class="left-line"></view>
						<view :class="index == current ? 'item-nei' : ''" style="width: 100%;">{{ item.categoryName }}</view>
					</view>
				</view>
			</scroll-view>
			<scroll-view scroll-y="true" class="scroll-right" :style="current == 0 ? 'border-radius: 0' : ''">
				<view v-for="(item, index) in serviceList" :key="index">
					<view class="title">{{ item.categoryName }}</view>
					<view class="serve-list">
						<view class="serve-item" v-for="(citem, cindex) in item.serviceItemsList" :key="cindex">
							<view class="serve-item" @click="toDetail(citem)">
								<image :src="citem.icon" mode="aspectFill"></image>
								<view>{{ citem.serviceName }}</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		getServiceCategoryList
	} from '@/apis/request.js';

	export default {
		data() {
			return {
				city: {
					id: 350200
					// title: '厦门市'
				},
				current: '',
				keywords: '',
				categoryList: [], //左侧tab栏
				serviceList: [], //右侧服务列表
				parentId: '',
				channel: ''
			};
		},
		onLoad() {
			var launchOptions = uni.getLaunchOptionsSync()
			var extraData = launchOptions.referrerInfo.extraData
			this.channel = extraData?.channel
			if(this.channel) {
				uni.setStorageSync('city', {
					id: extraData.city_id || 350200,
					title: extraData.city_name || '厦门市'
				})
			}
			
			this.city = uni.getStorageSync('city');
			this.getCategoryTab();
		},
		methods: {
			leftClick(item, index) {
				this.current = index;
				this.parentId = item.id;
				this.getServiceList();
			},
			toDetail(item) {
				uni.navigateTo({
					url: `/pages/servePages/serveDetail?id=${item.id}&channel=${this.channel || ''}`
				});
			},
			//顶部搜索
			handleSearch() {
				this.getServiceList();
			},
			//左侧tab栏
			getCategoryTab() {
				getServiceCategoryList({
					cityId: this.city.id,
					level: 1,
					parentId: ''
				}).then(res => {
					this.categoryList = res;
					this.parentId = res[0].id;
					this.getServiceList();
				});
			},
			//右侧服务列表
			getServiceList() {
				getServiceCategoryList({
					cityId: this.city.id,
					level: 2,
					parentId: this.parentId,
					keywords: this.keywords
				}).then(res => {
					this.serviceList = res;
				});
			}
		}
	};
</script>

<style scoped lang="scss">
	.page {
		background-color: #f2f2f2;
		height: 100%;
		min-height: 100vh;

		.search-view {
			display: flex;
			background-color: #fff;
			input {
				margin: 20rpx auto;
				padding-left: 70rpx;
				box-sizing: border-box;
				width: 690rpx;
				height: 72rpx;
				border-radius: 36rpx;
				background-color: #F7F7F7;
			}

			image {
				position: absolute;
				top: 42rpx;
				left: 60rpx;
				width: 26rpx;
				height: 26rpx;
			}
		}

		.scroll-view {
			display: flex;
			padding-top: 20rpx;
			position: fixed;
			bottom: 0;
			top: 90rpx;
			width: 750rpx;

			.scroll-left {
				flex: 1;
				text-align: center;

				.left-item {
					height: 100rpx;
					line-height: 100rpx;
					font-size: 30rpx;
					color: #4D4D4D;
					background-color: #F7F7F7;
				}

				.left-line {
					width: 6rpx;
					height: 40rpx;
					border-radius: 3rpx;
					background-color: #32C59A;
				}

				.left-items {
					height: 100rpx;
					line-height: 100rpx;
					font-size: 32rpx;
					color: #32C59A;
					font-weight: bold;
					background-color: #F7F7F7;
				}

				.top-item {
					height: 100rpx;
					line-height: 100rpx;
					font-size: 30rpx;
					color: #4D4D4D;
					border-radius: 0 0 30rpx 0;
					background-color: #F7F7F7;
				}

				.bottom-item {
					height: 100rpx;
					line-height: 100rpx;
					font-size: 30rpx;
					color: #4D4D4D;
					border-radius: 0 30rpx 0 0;
					background-color: #F7F7F7;
				}

				.item-nei {
					border-radius: 30rpx 0 0 30rpx;
					background-color: #fff;
				}
			}

			.scroll-right {
				flex: 3;
				border-radius: 30rpx 0 0 0;
				background-color: #fff;

				.title {
					font-size: 30rpx;
					padding: 30rpx 0 0 30rpx;
				}

				.serve-list {
					padding: 30rpx 0rpx 30rpx 30rpx;
					display: flex;
					flex-wrap: wrap;

					.serve-item {
						margin: 0 15rpx 14rpx 0;

						image {
							width: 140rpx;
							height: 140rpx;
							border-radius: 16rpx;
						}

						view {
							width: 140rpx;
							text-align: center;
							color: #666666;
							font-size: 24rpx;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;
						}
					}
				}
			}
		}
	}
</style>